<%@ page import="com.example.day_day_up.entity.vo.WebExamVO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .exam-header {
    height: 60px;
    background-color: #ffffff;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
  }

  .check-space {
    display: flex;
    background-color: #ffffff;
    flex-direction: column;
    padding: 10px 20px;
  }

  .checkbox {
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .checkbox span {
    font-size: 14px;
    margin-right: 20px;
  }

  .check-btn {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }

  .check-btn:hover {
    cursor: pointer;
  }


  .exam-space {
    display: flex;
    background-color: #ffffff;
    flex-direction: column;
    padding: 20px;
    /* 将元素垂直排列 */
    border-radius: 0 0 5px 5px;
  }

  .exam-space-header {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 16px;
    color: #6c6a6a;
    background-color: #f7f5f5;
    padding: 0 20px;

    .header-left {
      display: flex;
      flex: 1;
    }

    .header-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
    }
  }


  .exam-card {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;

    .card-left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .card-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
    }

    .exam-img {
      width: 30px;
      height: 30px;
      margin-right: 20px;
    }

    .exam-info {
      display: flex;
      flex-direction: column;
    }
  }

  .degree-1 {
    color: #45a049;
    margin-right: 5px;
  }

  .degree-2 {
    color: orange;
    margin-right: 5px;
  }

  .degree-3 {
    color: red;
    margin-right: 5px;
  }

  .no-list {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #6c6a6a;
    background-color: white;
    border-radius: 0 0 5px 5px;
  }

  .exam-card:hover {
    background: rgba(181, 207, 243, 0.2);
    cursor: pointer;
  }

  .exam-info .exam-title:hover {
    color: #007bff;
  }

  .exam-info .done {
    margin-top: 5px;
    font-size: 12px;
    color: #6c6a6a;
  }

  .end-div {
    height: 60px;
    padding: 0 40px;
  }

  #examDialog {
    position: relative;
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
  }

  .close {
    width: 20px;
    height: 20px;
    padding: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .close:hover {
    cursor: pointer;
    background-color: dodgerblue;
  }

  #examDialog span {
    font-weight: bold;
    color: red;
  }

  #examDialog p {
    font-size: 18px;
    margin: 20px 0;
  }

  #cancel-exam,
  #start-exam {
    padding: 8px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
  }

  #cancel-exam {
    background-color: #ccc;
    color: #fff;
  }

  #start-exam {
    background-color: dodgerblue;
    color: #fff;
  }

  #start-exam:hover {
    background-color: #4CAF50;
  }

</style>

<div class="exam-header"></div>
<div class="check-space">
  <div class="checkbox">
    <span>筛选</span>
    <img src="../assets/file_imgs/复选框.png" alt="复选框" class="check-btn" onclick="showAll()">
    <span>全部</span>
    <img src="../assets/file_imgs/复选框.png" alt="复选框" class="check-btn" onclick="showCompleted()">
    <span>已完成</span>
    <img src="../assets/file_imgs/复选框.png" alt="复选框" class="check-btn" onclick="showUncompleted()">
    <span>未完成</span>
  </div>
</div>
<div class="exam-space">
  <div class="exam-space-header">
    <div class="header-left">
      <span>考试名称</span>
    </div>
    <div class="header-right">
      <span>难度</span>
      <span>答题人数</span>
      <span>发布时间</span>
    </div>
  </div>
  <%
    String examsKey = "exams_key" + request.getParameter("id");
    List<WebExamVO> exams = (List<WebExamVO>) session.getAttribute(examsKey);
    request.setAttribute("exams", exams);
  %>
  <c:forEach items="${exams}" var="exam">
    <div class="exam-card ${exam.status? 'completed' :'uncompleted'}">
      <div class="card-left">
        <c:if test="${exam.status}">
          <img src="../assets/file_imgs/考试_shadow.jpg" alt="已完成图标" class="exam-img">
        </c:if>
        <c:if test="${!exam.status}">
          <img src="../assets/file_imgs/考试.png" alt="未完成图标" class="exam-img">
        </c:if>
        <div class="exam-info">
          <span class="exam-title"
                onclick="showDialog(${exam.testTime},${exam.id},${exam.courseId})">${exam.title}</span>
          <c:if test="${exam.status}"> <span class="done">已完成</span> </c:if>
          <c:if test="${!exam.status}"> <span class="done">未完成</span> </c:if>
        </div>
      </div>
      <div class="card-right">
        <c:if test="${exam.degree == 1}">
          <span class="degree-1">简单</span>
        </c:if>
        <c:if test="${exam.degree == 2}">
          <span class="degree-2">中等</span>
        </c:if>
        <c:if test="${exam.degree == 3}">
          <span class="degree-3">困难</span>
        </c:if>
        <span>${exam.finishCount}</span>
        <span>${exam.createTime}</span>
      </div>
    </div>
  </c:forEach>
  <c:if test="${empty exams}">
    <div class="no-list">
      暂时空空如也
    </div>
  </c:if>
  <div class="end-div"></div>
  <dialog id="examDialog">
    <img src="../assets/images/关闭.png" alt="关闭" class="close" onclick="examDialog.close()">
    <p>该考试时长 <span id="exam-time"></span> 分钟，点击确定开始考试</p>
    <button id="cancel-exam" onclick="examDialog.close()">取消</button>
    <button id="start-exam">确定</button>
  </dialog>
</div>

<script>
  function showDialog(minutes, id, c_id) {
    var examTime = document.getElementById('exam-time')
    examTime.textContent = minutes
    var startExam = document.getElementById('start-exam')
    startExam.addEventListener('click', function () {
      toExam(id, c_id)
      examDialog.close()
    })
    examDialog.showModal()
  }

  function showAll() {
    var exams = document.getElementsByClassName('exam-card')
    for (let i = 0; i < exams.length; i++) {
      exams[i].style.display = 'flex'
    }
  }

  function showCompleted() {
    var exams = document.getElementsByClassName('exam-card')
    for (let i = 0; i < exams.length; i++) {
      if (exams[i].classList.contains('completed')) {
        exams[i].style.display = 'flex'
      } else {
        exams[i].style.display = 'none'
      }
    }
  }

  function showUncompleted() {
    var exams = document.getElementsByClassName('exam-card')
    for (let i = 0; i < exams.length; i++) {
      if (exams[i].classList.contains('uncompleted')) {
        exams[i].style.display = 'flex'
      } else {
        exams[i].style.display = 'none'
      }
    }
  }

  function toExam(id, c_id) {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', '/day_day_up/exam?id=' + id, true)
    xhr.responseType = 'json'

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        window.location.href = '/day_day_up/exam/index.jsp?id=' + id + '&c_id=' + c_id
      }
    }

    xhr.send()
  }

  var checks = document.getElementsByClassName('check-btn')
  for (let i = 0; i < checks.length; i++) {
    checks[i].setAttribute('index', i)
  }
  checks[0].src = '../assets/file_imgs/复选框checked.png'

  for (let i = 0; i < checks.length; i++) {
    checks[i].addEventListener('click', function () {
      for (let i = 0; i < checks.length; i++) {
        checks[i].src = '../assets/file_imgs/复选框.png'
      }
      this.src = '../assets/file_imgs/复选框checked.png'
    })
  }
</script>

